<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/lx.css">
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9FEijeOWGUrd6GcQq1g8ZaPNW683Ns2K"></script>
</head>
<body>
    <!-- head -->
    <div class="head">
        <img src="../img/head-img/head.png" alt="">
        <div class="nav">
            <ul>
                <li>
                    <a href="sy.html">首页</a>
                    <div class="line"></div>
                </li>
                <li>
                    <a href="gy.html">关于</a>
                    <div class="line"></div>
                </li>
                <li>
                    <a href="cy.html">茶叶</a>
                    <div class="line"></div>
                </li>
                <li>
                    <a href="jd.html">基地</a>
                    <div class="line"></div>
                </li>
                <li>
                    <a href="xw.html">新闻</a>
                    <div class="line"></div>
                </li>
                <li>
                    <a href="lx.html">联系</a>
                    <div class="line"></div>
                </li>
            </ul>
        </div>
        <div class="small_logo">
            <img src="../img/head-img/搜索.png" alt="">
            <img src="../img/head-img/用户.png" alt="" onclick="location.href='login.html'">
            <img src="../img/head-img/购物车.png" alt="" onclick="location.href='shopcar.html'">
        </div>
    </div>
    <!-- 大图 -->
    <div class="bgc">
        <img src="../img/联系/茶大图.webp" alt="">
    </div>
     <!-- content -->
     <div class="content">
        <div>
            中国历史上有很长的饮茶纪录，已经无法确切地查明到底是在什么年代了，
            但是大致的时代是有说法的。并且也可以找到证据显示，
            确实在世界上的很多地方饮茶的习惯是从中国传过去的。
        </div>
    </div>
    <!-- 三张图 -->
     <div class="threeimg">
        <div class="part">
            <div>
                <img src="../img/联系/短信.webp" alt="">
            </div>
            <div  style="padding: 17px 0px 0px;">
                <span>邮箱</span>
            </div>
            <div style="padding: 7px 0px 0px;">
                <span>info@email.com</span>
            </div>
        </div>
        <div class="line"></div>
        <div class="part">
            <div>
                <img src="../img/联系/电话.webp" alt="">
            </div>
            <div  style="padding: 17px 0px 0px;">
                <span>电话</span>
            </div>
            <div style="padding: 7px 0px 0px;">
                <span>010-69557550</span>
            </div>
        </div>
        <div class="line"></div>
        <div class="part">
            <div>
                <img src="../img/联系/地址.webp" alt="">
            </div>
            <div  style="padding: 17px 0px 0px;">
                <span>地址</span>
            </div>
            <div style="padding: 7px 0px 0px;">
                <span>苏州市建外SOHO东区2号楼</span>
            </div>
        </div>
     </div>
     <div class="position">
        <div class="area" id="map">

        </div>
     </div>
     <!-- foot -->
     <div class="foot2">
        <div class="foot2_left">
            <div class="part1">
                <sapn>联系</sapn><br>
                <sapn>concat</sapn>
            </div>
            <div class="part2">
                <span>关注我们</span><br>
                <img src="../img/foot-img/微信.png" alt="">
                <img src="../img/foot-img/微博.png" alt="">
            </div>
            <div class="part3">
                <span>起飞页自助建站网站</span><br>
                <div class="font">
                    <span>地址：苏州市建外SOHO东区2号楼</span><br>
                    <span>邮编：100000</span><br>
                    <span>电话：010-69557550</span>
                </div>
            </div>
        </div>
        <div class="foot2_right">
            <div>
                <img src="../img/foot-img/ewm.webp" alt="">
                <div style="text-align: center; width: 100px;">微信</div>
            </div>
            <div style="margin-left: 50px;">
                <img src="../img/foot-img/ewm.webp" alt="">
                <div style="text-align: center; width: 100px;">微博</div>
            </div>
        </div>
     </div>
     <div class="talk">
        <div>COPYRIGHT (©) 2019 茶叶类网站  京ICP备41414141414-1号</div>
     </div>


     <script type="text/javascript">
        //创建和初始化地图函数：
        function initMap(){
          createMap();//创建地图
          setMapEvent();//设置地图事件
          addMapControl();//向地图添加控件
          addMapOverlay();//向地图添加覆盖物
        }
        function createMap(){ 
          map = new BMap.Map("map"); 
          map.centerAndZoom(new BMap.Point(113.708659,34.755849),15);
        }
        function setMapEvent(){
          map.enableScrollWheelZoom();
          map.enableKeyboard();
          map.enableDragging();
          map.enableDoubleClickZoom()
        }
        function addClickHandler(target,window){
          target.addEventListener("click",function(){
            target.openInfoWindow(window);
          });
        }
        function addMapOverlay(){
          var markers = [
            {content:"我的备注",title:"我的标记",imageOffset: {width:0,height:3},position:{lat:34.753892,lng:113.706862}}
          ];
          for(var index = 0; index < markers.length; index++ ){
            var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
            var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
              imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
            })});
            var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
            var opts = {
              width: 200,
              title: markers[index].title,
              enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
            marker.setLabel(label);
            addClickHandler(marker,infoWindow);
            map.addOverlay(marker);
          };
        }
        //向地图添加控件
        function addMapControl(){
          var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
          scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
          map.addControl(scaleControl);
          var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
          map.addControl(navControl);
          var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
          map.addControl(overviewControl);
        }
        var map;
          initMap();
      </script>
</body>
</html>    